import * as React from 'react';
import {Form, Input, Button, Checkbox, message} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import {PureComponent} from "react";
import './Login.less'
import logo from '../../assets/img/DLUTBadge.webp'
import {reqLogin} from '../../api'
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import {NavLink, Redirect, Route} from "react-router-dom";
import Register from "../Register/Register";
import ForgetPassword from "../ForgetPasssword/ForgetPassword";

interface User {
    name: string,
    email: string,
    photo: string,
    user_id: number,
    slogan: string,
    student_id: string,
    session_id: number,
    last_login_at: string
}

const Item = Form.Item

class Login extends PureComponent {

    state = {isRemember: true, rememberName: '', rememberPassword: ''}

    onFinish = async (values: any) => {

        const {username, password} = values
        const result: { status: number, data: User } = await reqLogin(username as string, password as string)


        if (result.status === 200) {
            message.success('登陆成功！');
            const user = result.data;
            memoryUtils.user = user;
            storageUtils.saveUser(user);
            this.state.rememberName = username
            this.state.rememberPassword = password
            return <Redirect to={'/home'}/>
        }
    };

    handleRemember = () => {
        this.setState({isRemember: !this.state.isRemember})
    }

    render() {

        if (memoryUtils.user && memoryUtils.user.user_id) {
            return <Redirect to={'/home'}/>
        }

        const {isRemember, rememberName, rememberPassword} = this.state


        return (
            <div className={'login'}>
                <header className={'login-header'}>
                    <img src={logo} alt="DLUT badge"/>
                    <h1>OurEDA 网盘系统</h1>
                </header>

                <div className={'login-content'}>
                    <h2>欢迎登录！</h2>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{remember: true}}
                        onFinish={this.onFinish}
                    >
                        <Item
                            name="username"
                            initialValue={isRemember ? rememberName : ''}
                            rules={[
                                {type: "string", required: true, whitespace: true, message: '学号或者大工邮箱必须输入!'},
                                {max: 28, message: '最多为23位!'},
                                {min: 9, message: '最少为9位!'},
                                {
                                    pattern: /((^\d{9,11}$)|(^\d{9,11}@mail\.dlut\.edu\.cn$))/,
                                    message: '请输入正确的学号或者大工邮箱!'
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="学号or大工邮箱"/>
                        </Item>
                        <Form.Item
                            name="password"
                            initialValue={isRemember ? rememberPassword : ''}
                            rules={[
                                {type: "string", required: true, whitespace: true, message: '密码必须输入!'},
                                {max: 15, message: '最多为15位!'},
                                {min: 8, message: '最少为8位!'},
                                {pattern: /^[a-zA-Z0-9]{8,15}$/, message: '请输入正确的密码!'},
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="Please input your Password"
                            />
                        </Form.Item>

                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox onClick={this.handleRemember}>Remember me</Checkbox>
                            </Form.Item>&nbsp; &nbsp;
                            <NavLink className="login-form-forget" to={'/forgetPassword'}>
                                Forget Password
                            </NavLink>
                            <Route path={'/forgetPassword'} component={ForgetPassword}/>
                        </Form.Item>

                        <Form.Item className={'buttons'}>
                            <>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    Log in
                                </Button>
                                &nbsp;  &nbsp; &nbsp;
                                <NavLink className="login-form-register" to={'/register'}>
                                    Register
                                </NavLink>
                                <Route path={'/register'} component={Register}/>
                            </>
                        </Form.Item>

                    </Form>
                </div>
            </div>
        )
    }
}

export default Login